import { useState, useEffect } from 'react';

// 演示生命周期
function Hooks1(props) {
	const [count1, setCount1] = useState(0);
	const [count2, setCount2] = useState(4);
	console.log('props', props);
	//默认的行为，会每次 render 后都执行，一般表单控制中使用
	useEffect(() => {
		console.log('useEffect with no dependency 1')
	});
	//传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次
	useEffect(() => {
		console.log('useEffect with no dependency 2')
	}, []);
	//返回时传递一个函数进行卸载，在组件卸载时候调用
	useEffect(() => {
		return () => {
			console.log('useEffect with specify callback'); 
		}
	});
	return (
		<div>
			<button onClick={() => {setCount1(count1 + 1);}}>按钮1:{count1}</button>
			<button onClick={() => setCount2(count2 + 1)}>按钮2:{count2}</button>
		</div>
	);
}

export default Hooks1 